<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>定时任务管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/Ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet"
          href="/static/adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="/static/adminlte/plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet"
          href="/static/adminlte/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="/static/adminlte/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="/static/adminlte/bower_components/select2/dist/css/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/adminlte/dist/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <link rel="shortcut icon"
          href=""
          type="image/x-icon"/>

    <style>p.indent {
            padding-left: 5em
        }</style>
</head>
<body class="skin-blue">
<div class="wrapper">
    <section class="content container-fluid" id="mainTable">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">定时任务管理</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-remove"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>任务编号:</label>
                                    <input type="text" class="form-control"
                                           placeholder="任务编号 ..."
                                           v-model.trim="searchArea.jobId">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>执行方式:</label>
                                    <select class="form-control select2" multiple="multiple"
                                            data-placeholder="选择执行方式"
                                            v-model="searchArea.execTimes" id="execTimesSelect">
                                        <option v-for="item in selectList.execTimes" :key="item.key"
                                                :value="item.value">{{item.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>执行日期:</label>
                                    <select class="form-control select2" multiple="multiple"
                                            data-placeholder="选择执行日期"
                                            v-model="searchArea.execDay" id="execDaySelect">
                                        <option v-for="item in selectList.execDay" :key="item.key"
                                                :value="item.value">{{item.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>启用标志:</label>
                                    <select class="form-control select2" multiple="multiple"
                                            data-placeholder="选择启用标志"
                                            v-model="searchArea.valid" id="validSelect">
                                        <option v-for="item in selectList.valid" :key="item.key"
                                                :value="item.value">{{item.value}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <button type="button" class="btn btn-default" style="margin-right:10px" @click="jobCtlReset()">重置</button>
                        <button type="button" class="btn btn-info" @click="jobCtlQuery()">查询</button>
                        <button type="button" class="btn btn-warning pull-right" data-toggle="modal"
                                data-target="#add-jobCtlTable">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            <span class="glyphicon-class">新增任务</span>
                        </button>
                    </div>
                    <div class="modal fade" id="add-jobCtlTable">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">新增任务</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务编号 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务编号 ..."
                                                       v-model.trim="addJobCtlTable.jobId">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务名称 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务名称 ..."
                                                       v-model.trim="addJobCtlTable.jobName">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务命令 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务命令 ..."
                                                       v-model.trim="addJobCtlTable.command">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">执行方式
                                                : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="addJobCtlTable.execTimes" id="addJobCtlTableExecTimes">
                                                    <option v-for="item in selectList.execTimes" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">定时配置 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="定时配置 ..."
                                                       v-model.trim="addJobCtlTable.cron">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">依赖任务 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="依赖任务编号 ..."
                                                       v-model.trim="addJobCtlTable.dependJobId">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">自定义 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="自定义依赖sql ..."
                                                       v-model.trim="addJobCtlTable.dependCustom">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">超时时间 : </label>

                                            <div class="col-sm-10">
                                                <div class="input-group">
                                                    <input type="number" class="form-control"
                                                           v-model.number="addJobCtlTable.timeout">
                                                    <span class="input-group-addon">秒</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">重试次数 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="重试次数 ..."
                                                       v-model.number="addJobCtlTable.maxFailures">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">执行日期
                                                : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="addJobCtlTable.execDay" id="addJobCtlTableExecDay">
                                                    <option v-for="item in selectList.execDay" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">启用标志 : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="addJobCtlTable.valid" id="addJobCtlTableValid">
                                                    <option v-for="item in selectList.valid" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                        关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" @click="jobCtlTableAdd()">新增
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="edit-jobCtlTable">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">修改任务</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务编号 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务编号 ..."
                                                       disabled v-model.trim="editJobCtlTable.jobId">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务名称 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务名称 ..."
                                                       v-model.trim="editJobCtlTable.jobName">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">任务命令 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="任务命令 ..."
                                                       v-model.trim="editJobCtlTable.command">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">定时配置 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="定时配置 ..."
                                                       v-model.trim="editJobCtlTable.cron">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">执行日期
                                                : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="editJobCtlTable.execDay" id="editJobCtlTableExecDay">
                                                    <option v-for="item in selectList.execDay" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">执行方式
                                                : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="editJobCtlTable.execTimes" id="editJobCtlTableExecTimes">
                                                    <option v-for="item in selectList.execTimes" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">超时时间 : </label>

                                            <div class="col-sm-10">
                                                <div class="input-group">
                                                    <input type="number" class="form-control"
                                                           v-model.number="editJobCtlTable.timeout">
                                                    <span class="input-group-addon">秒</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">重试次数 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="重试次数 ..."
                                                       v-model.number="editJobCtlTable.maxFailures">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">依赖任务 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="依赖任务 ..."
                                                       v-model.trim="editJobCtlTable.dependJobId">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">自定义 : </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="自定义 ..."
                                                       v-model.trim="editJobCtlTable.dependCustom">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputName" class="col-sm-2 control-label">启用标志 : </label>
                                            <div class="col-sm-10">
                                                <select class="form-control select2" style="width:100%"
                                                        v-model.number="editJobCtlTable.valid" id="editJobCtlTableValid">
                                                    <option v-for="item in selectList.valid" :key="item.key"
                                                            :value="item.value">{{item.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                        关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" @click="jobCtlTableEdit()">修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal modal-danger fade" id="delete-jobCtlTable">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">删除任务</h4>
                                </div>
                                <div class="modal-body">
                                    <p>确定删除  {{deleteJobCtlTable.jobId}}-{{deleteJobCtlTable.jobName}}？&hellip;</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                        关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" @click="jobCtlTableDelete()">
                                        删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal modal-info fade" id="run-jobCtlTable">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">执行任务</h4>
                                </div>
                                <div class="modal-body">
                                    <p>确定执行  {{runJobCtlTable.jobId}}-{{runJobCtlTable.jobName}}？&hellip;</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                        关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" @click="jobCtlTableRun()">
                                        执行
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <table id="jobCtlTable" class="table table-bordered table-striped"
                               style="width:100%">
                            <thead>
                            <tr>
                                <th>Number</th>
                                <th>任务编号</th>
                                <th>任务名称</th>
                                <th>任务命令</th>
                                <th>定时配置</th>
                                <th>执行日期</th>
                                <th>执行方式</th>
                                <th>超时时间(s)</th>
                                <th>重试次数</th>
                                <th>依赖任务</th>
                                <th>自定义</th>
                                <th>启用标志</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Number</th>
                                <th>任务编号</th>
                                <th>任务名称</th>
                                <th>任务命令</th>
                                <th>定时配置</th>
                                <th>执行日期</th>
                                <th>执行方式</th>
                                <th>超时时间(s)</th>
                                <th>重试次数</th>
                                <th>依赖任务</th>
                                <th>自定义</th>
                                <th>启用标志</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="content container-fluid" id="dtlTable">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">定时任务执行结果查询</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-remove"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>任务日期:</label>
                                    <div class="form-group">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right date-picker"
                                                   v-model="searchArea.jobDate" id="jobDateInput">
                                        </div>
                                        <!-- /.input group -->
                                    </div>
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>任务编号:</label>
                                    <input type="text" class="form-control"
                                           placeholder="任务编号 ..."
                                           v-model.trim="searchArea.jobId">
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>任务状态:</label>
                                    <select class="form-control select2" multiple="multiple"
                                            data-placeholder="选择任务状态"
                                            v-model="searchArea.jobStatus" id="jobStatusSelect">
                                        <option v-for="item in selectList.jobStatus" :key="item.key"
                                                :value="item.value">{{item.value}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <button type="button" class="btn btn-default" style="margin-right:10px" @click="jobDtlReset()">重置</button>
                        <button type="button" class="btn btn-info" @click="jobDtlQuery()">查询</button>
                    </div>
                    <div class="box-footer">
                        <table id="jobDtlTable" class="table table-bordered table-striped"
                               style="width:100%">
                            <thead>
                            <tr>
                                <th>Number</th>
                                <th>任务日期</th>
                                <th>任务编号</th>
                                <th>任务名称</th>
                                <th>任务命令</th>
                                <th>定时配置</th>
                                <th>依赖任务</th>
                                <th>自定义</th>
                                <th>任务状态</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Number</th>
                                <th>任务日期</th>
                                <th>任务编号</th>
                                <th>任务名称</th>
                                <th>任务命令</th>
                                <th>定时配置</th>
                                <th>依赖任务</th>
                                <th>自定义</th>
                                <th>任务状态</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<footer class="main-footer">
    <div class="pull-right hidden-xs">
        <b>Version</b> 2.4.0
    </div>
    <strong>Copyright &copy; 2011-2019 <a href="https://adminlte.io">{[{.Company}]}</a>.</strong> All rights
    reserved.
    <span style="margin-left:50px"></span>
    Contact me:
    <a class="email" href="mailto:{[{.Email}]}">{[{.Email}]}</a>
</footer>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">Recent Activity</h3>
            <ul class="control-sidebar-menu">
                <li>
                    <a href="javascript:void(0)">
                        <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                        <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                            <p>Will be 23 on April 24th</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="menu-icon fa fa-user bg-yellow"></i>

                        <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                            <p>New phone +1(800)555-1234</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                        <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                            <p>nora@example.com</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="menu-icon fa fa-file-code-o bg-green"></i>

                        <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                            <p>Execution time 5 seconds</p>
                        </div>
                    </a>
                </li>
            </ul>
            <!-- /.control-sidebar-menu -->

            <h3 class="control-sidebar-heading">Tasks Progress</h3>
            <ul class="control-sidebar-menu">
                <li>
                    <a href="javascript:void(0)">
                        <h4 class="control-sidebar-subheading">
                            Custom Template Design
                            <span class="label label-danger pull-right">70%</span>
                        </h4>

                        <div class="progress progress-xxs">
                            <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <h4 class="control-sidebar-subheading">
                            Update Resume
                            <span class="label label-success pull-right">95%</span>
                        </h4>

                        <div class="progress progress-xxs">
                            <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <h4 class="control-sidebar-subheading">
                            Laravel Integration
                            <span class="label label-warning pull-right">50%</span>
                        </h4>

                        <div class="progress progress-xxs">
                            <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <h4 class="control-sidebar-subheading">
                            Back End Framework
                            <span class="label label-primary pull-right">68%</span>
                        </h4>

                        <div class="progress progress-xxs">
                            <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <!-- /.control-sidebar-menu -->

        </div>
        <!-- /.tab-pane -->
        <!-- Stats tab content -->
        <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">
            <form method="post">
                <h3 class="control-sidebar-heading">General Settings</h3>

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Report panel usage
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Some information about this general settings option
                    </p>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Allow mail redirect
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Other sets of options are available
                    </p>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Expose author name in posts
                        <input type="checkbox" class="pull-right" checked>
                    </label>

                    <p>
                        Allow the user to show his name in blog posts
                    </p>
                </div>
                <!-- /.form-group -->

                <h3 class="control-sidebar-heading">Chat Settings</h3>

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Show me as online
                        <input type="checkbox" class="pull-right" checked>
                    </label>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Turn off notifications
                        <input type="checkbox" class="pull-right">
                    </label>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-sidebar-subheading">
                        Delete chat history
                        <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                    </label>
                </div>
                <!-- /.form-group -->
            </form>
        </div>
        <!-- /.tab-pane -->
    </div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
     immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="/static/adminlte/bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/static/adminlte/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/static/adminlte/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/static/adminlte/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="/static/adminlte/bower_components/moment/min/moment.min.js"></script>
<script src="/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="/static/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- bootstrap color picker -->
<script src="/static/adminlte/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/static/adminlte/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll -->
<script src="/static/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/static/adminlte/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/static/adminlte/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/adminlte/dist/js/demo.js"></script>
<!-- Page script -->
<script src="/static/layer-v3.1.0/layer.js"></script>
<script src="/static/vue-2.5.22/dist/vue.min.js"></script>
<script src="/static/vue-2.5.22/dist/vue.resource.min.js"></script>

<!-- DataTables -->
<script src="/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

{[{template "home-script.html" .}]}
</body>
</html>